[Update-2020-12-12] TapPay Web SDK 串接 - @types/tpdirect 介紹
這篇文章主要是說明如何使用 TapPay 這個服務
TapPay 是一家金流廠商，主要都是做線上金流，詳細就不多說
有興趣想要詳細了解可以去參考官網 https://www.tappaysdk.com
這邊會以 Web 服務為主去做範例，完整程式碼，請參考最下面
TapPay 近期在 github 上面好像有公佈測試用的 key
要拿到以下的值才有辦法作後續的付款
程式部分
測試卡號
測試卡號可以參考這裡
https://docs.tappaysdk.com/tutorial/zh/reference.html#test-card
card number 4242424242424242
month 01
year 23
ccv 123
主要分成以下幾個步驟
前端
後端
根據最新的 SDK 發佈的方法, 可以直接在一個 element 底下把卡號輸入表單塞進去
HTML 分成兩個部分
yujack
<div style="width: 480px; margin: 50px auto;">
<label>CardView</label>
<!-- 這是我們要塞表單的地方 -->
<div id="cardview-container"></div>
<!-- 這是我們要觸發 GetPrime 方法的地方 -->
<button id="submit-button" onclick="onClick()">Get Prime</button>
</div>
Javascript 分成三個部分
// 設置好等等 GetPrime 所需要的金鑰
TPDirect.setupSDK(11327, "app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC", "sandbox")
// 把 TapPay 內建輸入卡號的表單給植入到 div 中
TPDirect.card.setup('#cardview-container')
var submitButton = document.querySelector('#submit-button')
function onClick() {
// 讓 button click 之後觸發 getPrime 方法
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
console.err('getPrime 錯誤')
return
}
var prime = result.card.prime
alert('getPrime 成功: ' + prime)
})
}
小弟我是習慣用 nodejs 撰寫後端伺服器
所以這邊會以 nodejs 去做付款的動作
前端 Get Prime 成功之後, 就要把這組 prime 送到後端了
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const https = require('https');
const PORT = 8080
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: false
}))
app.use('/', express.static(__dirname + "/html")) //serve static content
app.post('/pay-by-prime', (req, res, next) => {
// 必須要把程式實作在這邊
})
app.listen(PORT, () => {
console.log('Connet your webiste in the http://localhost:8080/');
})
接下來要實作 pay-by-prime 的程式
要加到 app.post('/pay-by-prime') 裡面
這裡有兩個參數要注意
另外就是 headers 裡面要特別帶 x-api-key 進去
否則會收到 access deny 的 response
可以參考 https://docs.tappaysdk.com/tutorial/zh/back.html#pay-by-prime-api
所需要帶的參數和 headers
const post_data = {
"prime": req.body.prime,
"partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
"merchant_id": "GlobalTesting_CTBC",
"amount": 1,
"currency": "TWD",
"details": "An apple and a pen.",
"cardholder": {
"phone_number": "+886923456789",
"name": "jack",
"email": "example@gmail.com"
},
"remember": false
}
axios.post('https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime', post_data, {
headers: {
'x-api-key': 'partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM'
}
}).then((response) => {
console.log(response.data);
return res.json({
result: response.data
})
})
實作完成後，開啟 nodejs server
然後打上測試卡後就可以完成付款了！
記得前端要補上把 prime 帶上來的程式
$.post('/pay-by-prime', {prime: prime}, function(data) {
alert('付款成功' + JSON.stringify(data))
})
|
|--- app.js
|
|----html
| |---index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script text="text/javascript" src="https://js.tappaysdk.com/tpdirect/v3"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>Connect payment with TapPay</title>
</head>
<body>
<div style="width: 480px; margin: 50px auto;">
<label>CardView</label>
<div id="cardview-container"></div>
<button id="submit-button" onclick="onClick()">Get Prime</button>
<pre id="result1"></pre>
<pre id="result2"></pre>
</div>
<script>
TPDirect.setupSDK(11327, "app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC", "sandbox")
TPDirect.card.setup('#cardview-container')
var submitButton = document.querySelector('#submit-button')
var cardViewContainer = document.querySelector('#cardview-container')
function onClick() {
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
console.log('getPrime 錯誤')
return
}
alert('getPrime 成功')
var prime = result.card.prime
document.querySelector('#result1').innerHTML = JSON.stringify(result, null, 4)
$.post('/pay-by-prime', {prime: prime}, function(data) {
alert('付款成功')
document.querySelector('#result2').innerHTML = JSON.stringify(data, null, 4)
})
})
}
</script>
</body>
</html>
記得先執行以下 command
npm install body-parser express axios
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const https = require('https');
const axios = require('axios')
const PORT = 8080
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: false
}))
app.use('/', express.static(__dirname + "/html")) //serve static content
app.post('/pay-by-prime', (req, res, next) => {
const post_data = {
"prime": req.body.prime,
"partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
"merchant_id": "GlobalTesting_CTBC",
"amount": 1,
"currency": "TWD",
"details": "An apple and a pen.",
"cardholder": {
"phone_number": "+886923456789",
"name": "jack",
"email": "example@gmail.com"
},
"remember": false
}
axios.post('https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime', post_data, {
headers: {
'x-api-key': 'partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM'
}
}).then((response) => {
console.log(response.data);
return res.json({
result: response.data
})
})
})
app.listen(PORT, () => {
console.log('Connet your webiste in the http://localhost:8080/');
})
有時間再來寫寫怎麼接上 Apple Pay, Pay with Google, Line Pay 的教學
iThome鐵人賽
看影片追技術